<template>
  <div>
    <a-table :data-source="bannerList" rowKey="bannerid">
      <a-table-column title="序号">
          <!-- 自定义列的信息
          text 代表的就是 img 的值，record 代表其实就是每一条数据 -->
          <template slot-scope="text, record, index">
            <span>{{ index + 1 }}</span>
          </template>
       </a-table-column>
       <a-table-column title="图片" data-index="img" >
          <!-- 自定义列的信息
          text 代表的就是 img 的值，record 代表其实就是每一条数据 -->
          <template slot-scope="text, record">
            <img :src="text" :alt="record.alt" style="width: 100px;height: 100px">
          </template>
       </a-table-column>
       <a-table-column  title="提示" data-index="alt" />
       <a-table-column  title="链接" data-index="link" />
        <a-table-column title="操作">
          <template slot-scope="text, record">
            <a-space>
              <a-button type="dashed">
                编辑
              </a-button>
              <a-button type="danger" @click="deleteItem(record.bannerid)">
                删除
              </a-button>
            </a-space>
          </template>
       </a-table-column>
    </a-table>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      bannerList: state => state.banner.bannerList
    })
  },
  methods: {
    ...mapActions({
      getBannerListAction: 'banner/getBannerListAction',
      deleteBannerItemAction: 'banner/deleteBannerItemAction'
    }),
    deleteItem (bannerid) {
      this.deleteBannerItemAction({ bannerid })
    }
  },
  mounted () {
    this.getBannerListAction()
  }
}
</script>
